<template>
	<view :style="{color: `${textColor}`, fontWeight:'bold'}">
		<text :style="{fontSize: `${leftSize}`}">￥</text>
		<text :style="{fontSize: `${size}`}">{{splitPrice[0]}}</text>
		<text :style="{fontSize: `${leftSize}`}">.{{splitPrice[1]}}</text>
	</view>
</template>

<script>
	export default {
		name: "price",
		props: {
			price: {
				type: [Number, String],
				default: '0.00'
			},
			leftSize: {
				type: [String],
				default: '20rpx'
			},
			size: {
				type: [String],
				default: '30rpx'
			},
			textColor: {
				type: [String],
				default: "#db422c"
			}
		},
		computed: {
			splitPrice: function() {
				let price = ['0', '00']
				if(this.price && this.price != 0){
					price = this.price.split(".")
					if (!price[1]) {
						price[1] = '00'
					}
				}else{
					price[0] = '0'
					price[1] = '00'
				}
				
				return price
			}
		}
	}
</script>

<style>

</style>
